<template>
    <q-layout view="hHh Lpr lFf">
      <q-header elevated>
        <q-toolbar class="website-toolbar">
          <q-toolbar-title class="website-title">
            百诺数智档案
          </q-toolbar-title>
          <q-space></q-space>
          <q-btn v-for="content in moduleContent" :key="content.name" class="website-menu-btn" :flat="menuBtnFlat(content.route)" :color="menuBtnColor(content.route)" :text-color="menuBtnTextColor(content.route)" @click="toRoute(content.route, content.isTo)">
            {{ content.title }}
            <q-menu fit>
              <q-list style="min-width: 100px">
                <template v-for="(menu, index) in content.menus" :key="`${content.name}-${index}`">
                  <!--                :to="`/${content.route}/${menu.name}`"-->
                  <q-item v-show="menu.type === `menu`" clickable v-close-popup  @click="isShowInform(index, menu)" >
                    <q-item-section side>
                      <q-icon :name="menu.iconName" size="28px"></q-icon>
                    </q-item-section>
                    <q-item-section>{{ menu.title }}</q-item-section>
                  </q-item>
                  <q-separator v-if="menu.type === `separator`" />
                </template>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn dense color="blue-4" round icon="email" class="q-ml-md">
            <q-badge color="red" floating>4</q-badge>
          </q-btn>
          <q-space></q-space>
          <div>管理员</div>
          <q-dialog v-model="isCreateTable">
            <q-card class="my-card">
              <q-card-section>
                <div>创建初始化表格</div>
                <div>
                  <q-input label="表格标题" v-model="tableConfig.title"></q-input>
                  <q-input label="行数" v-model="tableConfig.row" model-value="" type="Number"></q-input>
                  <q-input label="列数" v-model="tableConfig.column" model-value="" type="Number"></q-input>
                  <div class="q-mt-md">
                    <q-btn-dropdown
                      split
                      color="orange"
                      push
                      glossy
                      no-caps
                      icon="folder"
                      label="下拉选择模板"
                    >
                      <q-list>
                        <q-item clickable v-close-popup  v-for="(item,index) in tableConfig.templates" :key="index">
                          <q-item-section avatar>
                            <q-avatar icon="folder" color="primary" text-color="white" />
                          </q-item-section>
                          <q-item-section>
                            <q-item-label>{{item.name}}</q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-btn-dropdown>
                  </div>
                  <div class=" no-wrap q-mt-md row justify-between">
                    <q-btn color="primary" @click="configForm">点击创建表格</q-btn>
                    <q-btn color="primary" @click="isCreateTable = false">取消</q-btn>
                  </div>
                </div>
              </q-card-section>
              <q-separator />
            </q-card>
          </q-dialog>
        </q-toolbar>
      </q-header>

      <q-drawer v-model="leftDrawerOpen" show-if-above :width="310" :breakpoint="500" bordered class="bg-white">
        <q-scroll-area class="fit">
          <div class="fit bg-white">
            <template v-for="content in leftDrawerContent" :key="content.title">
              <q-item-label header>{{ content.title }}</q-item-label>
              <div class="row q-pa-sm">
                <q-card v-for="menu in content.menus" :key="menu.title" :class="['col-6', 'cursor-pointer', leftDrawerMenuClass(menu.name)]" flat bordered square v-ripple @click="toRoute(`${content.module}/${menu.name}`)">
                  <q-card-section class="q-pb-none flex flex-center">
                    <q-icon :name="menu.iconName" size="40px"></q-icon>
                  </q-card-section>
                  <q-card-section class="q-pt-xs q-px-xs">
                    <q-item class="q-pa-none">
                      <q-item-section class="flex flex-center">
                        <q-item-label class="text-subtitle1">{{ menu.title }}</q-item-label>
                        <q-item-label class="text-subtitle2 text-grey-8" >{{ menu.subTitle }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-card-section>
                </q-card>
              </div>
            </template>
          </div>
        </q-scroll-area>
      </q-drawer>

      <q-page-container>
        <router-view name="default"/>
      </q-page-container>
    </q-layout>
<!--  <router-view name="outer" style="position: absolute;"></router-view>-->
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'MainLayout',

  components: {},

  setup () {
    const route = useRoute()
    const router = useRouter()
    const isCreateTable = ref(false) // 是否显示配置窗口
    const qDialog = ref(null)
    const root = ref(null)
    let currName = '' // 当前点击的模块名称

    // THIS 模块菜单栏内容
    const moduleContent = ref([
      {
        title: '档案检索',
        name: 'dataInquiry',
        route: 'data-inquiry',
        isTo: true,
        menus: []
      },
      {
        title: '档案录入',
        name: 'dataImport',
        route: 'data-import',
        isTo: false,
        menus: [
          { title: '企业与厂区', name: 'enterprise', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' },
          { type: 'separator' },
          { title: '环境影响评价', name: 'evaluation', iconName: 'img:/svgs/环境影响评价.svg', type: 'menu' },
          { title: '排污许可', name: 'pollution', iconName: 'img:/svgs/排污许可.svg', type: 'menu' },
          { title: '环保验收', name: 'acceptance', iconName: 'img:/svgs/环境验收.svg', type: 'menu' },
          { title: '环境应急', name: 'emergence', iconName: 'img:/svgs/环境应急.svg', type: 'menu' },
          { title: '污染源现状', name: 'current', iconName: 'img:/svgs/污染源.svg', type: 'menu' },
          { title: '环保执行守法情况', name: 'law', iconName: 'img:/svgs/守法.svg', type: 'menu' },
          { title: '清洁生产', name: 'produce', iconName: 'img:/svgs/清洁生产.svg', type: 'menu' },
          { title: '环境监管', name: 'supervise', iconName: 'img:/svgs/监管.svg', type: 'menu' },
          { type: 'separator' },
          { title: '名录库管理', name: 'dictionary', iconName: 'img:/svgs/名录库.svg', type: 'menu' }
        ]
      },
      {
        title: '管理审计',
        name: 'dataVerify',
        route: 'data-verify',
        isTo: false,
        menus: [
          { title: '角色管理', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' },
          { title: '用户管理', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' },
          { type: 'separator' },
          { title: '数据审批', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' }
        ]
      },
      {
        title: '用户中心',
        name: 'userCenter',
        route: 'user-center',
        isTo: false,
        menus: [
          { title: '我的审批', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' },
          { title: '我的暂存', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' },
          { type: 'separator' },
          { title: '个人信息变更', name: '', iconName: 'img:/svgs/企业厂区.svg', type: 'menu' }
        ]
      }
    ])
    // THIS 菜单按钮Flat功能是否开启
    const menuBtnFlat = (menuRoute) => {
      return menuRoute !== route.meta.module
    }
    // THIS 菜单按钮背景色
    const menuBtnColor = (menuRoute) => {
      return menuRoute === route.meta.module ? 'white' : 'primary'
    }
    // THIS 菜单按钮文字颜色
    const menuBtnTextColor = (menuRoute) => {
      return menuRoute === route.meta.module ? 'primary' : 'white'
    }
    // THIS 左侧导航栏开关
    const leftDrawerOpen = computed(() => ['data-import', 'data-verify', 'user-center'].includes(route.meta.module))
    // THIS 左侧导航栏内容
    const leftDrawerContent = ref([
      {
        title: '企业与厂区',
        module: 'data-import',
        menus: [
          { title: '企业与厂区', name: 'enterprise', subTitle: '企业与厂区', iconName: 'img:/svgs/企业厂区.svg' }
        ]
      },
      {
        title: '厂区数据管理',
        module: 'data-import',
        menus: [
          { title: '环境影响评价', name: 'evaluation', subTitle: '环境影响评价', iconName: 'img:/svgs/环境影响评价.svg' },
          { title: '排污许可', name: 'pollution', subTitle: '排污许可', iconName: 'img:/svgs/排污许可.svg' },
          { title: '环保验收', name: 'acceptance', subTitle: '环保验收', iconName: 'img:/svgs/环境验收.svg' },
          { title: '环境应急', name: 'emergence', subTitle: '环境应急', iconName: 'img:/svgs/环境应急.svg' },
          { title: '污染源现状', name: 'current', subTitle: '污染源现状', iconName: 'img:/svgs/污染源.svg' },
          { title: '环保执行守法情况', name: 'law', subTitle: '环保执行守法情况', iconName: 'img:/svgs/守法.svg' },
          { title: '清洁生产', name: 'produce', subTitle: '清洁生产', iconName: 'img:/svgs/清洁生产.svg' },
          { title: '环境监管', name: 'supervise', subTitle: '环境监管', iconName: 'img:/svgs/监管.svg' }
        ]
      },
      {
        title: '名录库管理',
        module: 'data-import',
        menus: [
          { title: '名录库管理', name: 'dictionary', subTitle: '名录库管理', iconName: 'img:/svgs/名录库.svg' }
        ]
      }
    ])
    // THIS 左侧导航栏样式
    const leftDrawerMenuClass = (menuRoute) => {
      return menuRoute === route.meta.menu ? 'bg-blue-2' : 'bg-white'
    }
    // THIS 跳转路由
    const toRoute = (to, isTo = true) => {
      console.log(to, isTo)
      if (isTo) {
        router.push(`/${to}`)
      }
    }
    const isShowInform = (index, menu) => {
      console.log(index, menu)
      currName = menu.name
      isCreateTable.value = true
    }
    const tableConfig = ref({ // 表格初始化配置
      row: 10,
      column: 10,
      title: 'title',
      rowTitle: '',
      colTitle: '',
      templates: [
        { name: '空白' },
        { name: '企业厂区' },
        { name: '百诺环保' }
      ]
    })
    // THIS 按照配置创建表格
    const configForm = () => { // 修改表格配置项
      router.push(`/data-import/${currName}`)
      console.log(tableConfig.value)
    }

    return {
      menuBtnFlat,
      menuBtnColor,
      menuBtnTextColor,
      moduleContent,
      leftDrawerOpen,
      leftDrawerContent,
      leftDrawerMenuClass,
      toRoute,
      isCreateTable,
      tableConfig,
      configForm,
      qDialog,
      root,
      isShowInform
    }
  }
})
</script>
